<template>
  <div>
    <h1>vue3测试v-model:实现父子组件数据同步</h1>
    <input type="text" placeholder="请你输入密码" v-model="info" />
    <hr />
    <!-- <Child :modelValue="money" @updata:modelValue="update"></Child> -->
    <Child v-model="money"></Child>
    <!-- 这里代表给子组件传递两个props 分别叫pageNo、pageSize 同时绑定两个事件分别叫
      update:pageNo和update:pageSize
    -->
    <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>

    <!-- 
      v-model实现父子组件数据同步:
       <Child :value="money" @input="handler"></Child>
     -->
    <!-- vue3:
        v-model组件身上使用
        第一相：当于 给子组件传递                props modelValue 
        第二：给子组件绑定的自定义事件名字        update:modelValue
        第三：所以在子组件中必须要触发这个update:modelValue，否则无法传递数据，
        同理传递的参数必须叫modelValue
     -->
  </div>
</template>

<script setup lang="ts">
//v-model指令：收集表单数据，数据双向绑定
//v-model也可实现组件之间的通信，实现父子组件数据同步的业务
//父组件给子组件数据porps
//子组件给父组件数据，自定义数据
//v-model:收集表单数据->数据双向绑定
import Child from "./Child.vue";
import Child1 from "./Child1.vue";
import { ref } from "vue";

let info = ref("");

//父组件的数据钱数
let money = ref(1000);
let pageNo = ref(1);
let pageSize = ref(3);
//收集表单数据

const update = (num: number) => {
  money.value = num;
};
</script>

<style scoped></style>
